<template>
  <div class="amap-box">
    <el-amap :amap-manager="amapManager" :vid="'amap-vue'" :zoom="zoom" :plugin="plugin" :center="center"
      :events="events">
      <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :key="index" :icon="icon2"></el-amap-marker>

      <!-- <el-amap-info-window :position="window.position" :content="window.content" :visible="window.visible" :offset="offset" @click="toCompanyDetail(window.CompanyCode)"></el-amap-info-window> -->
      <!-- <div v-if="window.visible" @click="toCompanyDetail"> -->
      <!-- <el-amap-info-window ref="info" :position="window.position" :content="window.content" :visible="window.visible" :offset="offset" :events="window.events"></el-amap-info-window> -->
      <el-amap-info-window ref="info" :position="window.position"  :visible="window.visible" :offset="offset" :events="window.events">
      <template>
          <div>
            <div @click="toCompanyDetail(window.CompanyCode)"><span style='color: #66A0FF' >{{window.CompanyName}}</span></div> 
            <div>地 址：{{window.Address}} </div> 
            <div>行 业: {{window.ApplyProfessionName}}</div>
          </div>
      </template>
      </el-amap-info-window>
    <!-- </div> -->
    </el-amap>


  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import icon2 from '@/assets/Images/AppIcon/icon_point.png'
window._AMapSecurityConfig = {
  securityJsCode: "6e479f7089f9cb1710498744ad56cfff",
}
let amapManager = new AMapManager();
export default {
  data() {
    let self = this;
    return {
      visible: false,
      offset: [5, -30],//窗体偏移
      windows: [],
      window: {
        visible: false,
        position: [113.858991, 23.088811],
        content: '',
        events:{}
      },
      icon2,
      markers: [],
      searchOption: {
        city: this.city ? this.city : "全国",
        citylimit: true
      },
      // center: [121.329402, 31.228667],
      center: [113.813484, 23.069324],
      zoom: 11,
      lng: 0,
      lat: 0,
      loaded: false,
      amapManager,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            // self.initSearch();
          });
        },
        // 点击获取地址的数据
        // click(e) {
        //   self.markers = [];
        //   let { lng, lat } = e.lnglat;
        //   self.lng = lng;
        //   self.lat = lat;
        //   self.center = [lng, lat];
        //   // self.markers.push({position:[lng, lat]});
        //   self.markers.push([lng, lat]);
        //   // 这里通过高德 SDK 完成。
        //   let geocoder = new AMap.Geocoder({
        //     radius: 1000,
        //     extensions: "all"
        //   });
        //   geocoder.getAddress([lng, lat], function (status, result) {
        //     if (status === "complete" && result.info === "OK") {
        //       if (result && result.regeocode) {
        //         self.address = result.regeocode.formattedAddress;
        //         self.searchKey = result.regeocode.formattedAddress;
        //         self.$emit("updateLocation", lng, lat, self.searchKey);
        //         self.$nextTick();
        //       }
        //     }
        //   });
        // }
      },
      plugin: [
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  if (self.isEdit) {
                    // 设置经度
                    self.lng = self.longitude;
                    // 设置维度
                    self.lat = self.latitude;
                    // 设置坐标
                    self.center = [self.longitude, self.latitude];
                    // self.markers.push([self.longitude, self.latitude]);
                  } else {
                    // 设置经度
                    self.lng = result.position.lng;
                    // 设置维度
                    self.lat = result.position.lat;
                    // 设置坐标
                    self.center = [self.lng, self.lat];
                    // self.markers.push([self.lng, self.lat]);
                  }
                  // load
                  self.loaded = true;
                  // 页面渲染好后
                  self.$nextTick();
                }
              });
            }
          }
        }
      ]
    }
  },
  mounted() {
    let windows = []
    let that=this;
    this.$axios.get("/UserCompany/GetAppPageData?dataType=orgCompanyList&limit=9999").then(res => {
      let data = res.data.Data.filter(e => {
        return e.Lat && e.Lng
      })
      
      data.forEach((element, index) => {

        let marker = {
          visible: false,
          position: [parseFloat(element.Lng), parseFloat(element.Lat)],
          // icon:
          events: {
            click() {
              that.windows.forEach(window => {
                window.visible = false
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true
              })
            }
          }
        }
        windows.push({
          visible: false,
          position: [parseFloat(element.Lng), parseFloat(element.Lat)],
          content: '' +
            "<div>" + element.CompanyName + "</div>" +
            "<div>" + "地 址：" + element.Address + "</div>" +
            "<div>" + "行 业: " + "<span style='color: #66A0FF'>" + element.ApplyProfessionName + "</span>" + "</div>",
          CompanyCode:element.CompanyCode,
          CompanyName:element.CompanyName,
          Address:element.Address,
          ApplyProfessionName:element.ApplyProfessionName,
          events:{
            click(e){
              console.log("kkkkkkkkkkk")
              console.log(e)
            },
            close(){
              console.log("ddddddddddddddd")
            }
          }
        })
        this.markers.push(marker)
      });
    })
    this.windows = windows
  },
  methods: {
    toCompanyDetail(CompanyCode){
      this.$router.push('/BaseInfo?CompanyCode='+CompanyCode)
    },
    initSearch() {
      let vm = this;
      let map = this.amapManager.getMap();
      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
        let poiPicker = new PoiPicker({
          input: "search",
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: "searchTip",
          searchResultsContainer: "searchTip"
        });
        vm.poiPicker = poiPicker;
        // 监听poi选中信息
        poiPicker.on("poiPicked", function (poiResult) {
          let source = poiResult.source;
          let poi = poiResult.item;
          if (source !== "search") {
            poiPicker.searchByKeyword(poi.name);
          } else {
            poiPicker.clearSearchResults();
            // vm.markers = [];
            let lng = poi.location.lng;
            let lat = poi.location.lat;
            let address = poi.name; // poi.cityname + poi.adname + poi.name
            vm.center = [lng, lat];
            // vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = lat;
            vm.address = address;
            vm.searchKey = address;
            vm.$emit("updateLocation", lng, lat, vm.searchKey);
          }
        });
      });
    },
  }
}
</script>

<style lang="less" scoped>
.search-box {
  margin-top: 6px;
  width: 100%;
}

.search-box input {
  padding: 0 15px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.search-box input:focus {
  border-color: #409eff;
  outline: 0;
}

.search-box input::-webkit-input-placeholder {
  color: #c0c4cc;
}

.tip-box {
  width: 100%;
  max-height: 280px;
  position: absolute;
  top: 72px;
  z-index: 10000;
  overflow-y: auto;
  background-color: #fff;
}
</style>
<style>
.amap-ui-poi-picker-sugg,
.amap_lib_placeSearch {
  border: 1px solid #eee;
  border-radius: 4px;
}

.amap-box {
  /* height: 200px; */
  height: 100vh;
}
</style>